<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品标题</th>
    <th>商品价格</th>
    <th>商品销量</th>

  </tr>
</table>
<script>
  //实列化对象  空对象
  let p1={};
  //动态添加属性和方法
  p1.name="张三";
  p1.age=18;
  p1.run=function (){
    console.log(this.name+":"+this.age);
  }
  //调用方法
  p1.run();


  let p2={
    name:'李四',
    age:20,
    run:function (){
      console.log(this.name+":"+this.age);
    }
  }
  p2.run();
  //多个信息封装到一个对象中
  let arr=[{title:"小米手机",price:5000,saleCount:200},
    {title: "李宁篮球鞋",price: 500,saleCount: 100},
    {title: "华为电视",price: 4000,saleCount: 20},
    {title: "苹果14 pro max",price: 10000,saleCount: 2}];
  let table=document.querySelector("table")
  for(let product of arr){
    let tr=document.createElement("tr");
    let titleTd=document.createElement("td");
    let priceTd=document.createElement("td");
    let saleCountTd=document.createElement("td");
    titleTd.innerText=product.title;
    priceTd.innerText=product.price;
    saleCountTd.innerText=product.saleCount;
    tr.append(titleTd,priceTd,saleCountTd);
      table.append(tr);

  }


</script>

</body>
</html>